<template>
  <div class="content">
    <div class="content_top">
      <div class="xxbox">
        <p>选择星旋</p>
        <a-select
        ref="select"
        v-model:value="select1"
        style="width: 85px;margin-bottom: 5px;"
        :placeholder="'sat4L'"
        allowClearget_mset
      >
        <a-select-option
          :value="item.value"
          v-for="item in typeOptions"
          :key="item.label"
        >{{
          item.value
          }}</a-select-option>
      </a-select>
      </div>
      <div style="margin-left:50px;">
        <p>起始日期</p>
        <a-space direction="vertical">
           <a-date-picker v-model:value="value1" />
        </a-space>
      </div>
      <div style="margin-left:20px;">
        <p>结束日期</p>
        <a-space direction="vertical">
           <a-date-picker v-model:value="value2" />
        </a-space>
      </div>
    </div>
    <div class="content_bottom">
      <div class="top">
        sat4L
      </div>
      <index></index>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import moment, { Moment } from 'moment';
import index from './charts/index.vue'
export default defineComponent({
  components: { index },
  name: 'modemSet',
  setup() {
    let select1 = ref();
    const dateFormat = 'YYYY/MM/DD';
    const typeOptions = ref([
      {
        value: '1',
        label: 'M710a',
      },
      {
        value: '2',
        label: 'M650',
      },
      {
        value: '3',
        label: 'M650',
      },
    ]);
    return {
      select1,
      typeOptions,
      dateFormat,
      value1: ref<Moment>(moment('2020/01/20', dateFormat)),
      value2: ref<Moment>(moment('2024/01/20', dateFormat)),
    }
  }
})
</script>
<style scoped lang=less>
::v-deep .ant-select {
  /* 修改a-select的样式 */
  width: 100px;

  /* 举例：修改宽度 */
  .ant-select-selector {
    /* 修改选择器（输入框）的样式 */
    background: #DDDDDD !important;

    /* 举例：修改边框颜色 */
    // .ant-select-selection-placeholder {
    //   color: #000 !important;
    // }

  }

  /* 你可以继续添加更多的选择器来修改下拉菜单、选项等 */
}

::v-deep .ant-calendar-picker-input {
  width: 350px !important;
}

.content {
  width: 100%;
  height: 100%;

  .content_top {
    width: 100%;
    height: 100px;
    background: #F6F8F8;
    padding: 20px 20px;
    display: flex;

    p {
      margin-bottom: 0;
    }
  }

  .content_bottom {
    width: 100%;
    height: calc(100% - 120px);
    background: #fff;
    margin-top: 20px;
    .top{
      width: 100%;
      height: 60px;
      background: #F6F8F8;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
  }
}
</style>